<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title></title>
	<style type="text/css">
		*{
			margin: 0;
			padding: 0;
		}
		.paging{
			display: flex;
			align-items: center;
		}
		.pageIndex{
			display: flex;
		}
		.pageIndex span{
			width: 30px;
			height: 30px;
			border: 1px solid #ccc;
			margin: 5px;
			text-align: center;
			line-height: 30px;
		}
		.active{
			background: blue;
			color: #fff;
			border-color: blue;
		}
		li{
			list-style: none;
		}
	</style>
</head>
<body>
	<ul>
		<!-- <li>
			<span>id</span>
			<span>张三</span>
			<span>删除</span>
		</li> -->
	</ul>

	<div class="paging">
		<p class="left">上一页</p>
		<div class="pageIndex">	
			<!-- <span class="active">1</span>
			<span>2</span>
			<span>3</span>
			<span>4</span> -->
		</div>
		<p class="right">下一页</p>
	</div>

	<script type="text/javascript">
		// 定义页数
		let pages = 5;
		let pageIndex = document.querySelector(".pageIndex")

		for(let i = 0; i < pages; i++){
			pageIndex.innerHTML += `<span>${i+1}</span>`
			document.querySelector("span").className = "active"
		}

		// 获取所有页码，绑定点击事件
		let spans = document.querySelectorAll(".pageIndex span")
		for(let i = 0; i < spans.length; i++){
			spans[i].onclick = function(){
				page(this.innerText)
				// 清空上一个class
				document.querySelector(".active").className = ""
				this.className = "active"
			}
		}


		// 上一页 下一页
		let left = document.querySelector(".left")
		let right = document.querySelector(".right")

		left.onclick = function(){
			let nowAct = document.querySelector(".active")
			if (nowAct.previousElementSibling){
				nowAct.previousElementSibling.onclick()
			}else{
				alert("到头了")
			}
		}

		right.onclick = function(){
			let nowAct = document.querySelector(".active")
			if (nowAct.nextElementSibling){
				nowAct.nextElementSibling.onclick()
			}else{
				alert("到头了")
			}
		}



		let ul = document.querySelector("ul")
		function login(){
			let xhr = new XMLHttpRequest()

 			// 2.链接服务
 			xhr.open("post","http://wish.byesame.com/login")
 			// 请求头
 			xhr.setRequestHeader("content-Type",'application/x-www-form-urlencoded')
 			// 3.发送数据
 			xhr.send('userName=admin&passWord=123456')
 			//4.接收数据
 			xhr.onreadystatechange = function(){
 				if (xhr.readyState == 4) {
 					let res = JSON.parse(xhr.responseText)
 					console.log(res)
 					//将token存储到本地
					if(res.code == 200){
						localStorage.setItem("token",res.data.token)
					}
 				}
 			}
		}
		login()

		// 许愿留言列表
		function page(val){
			let xhr = new XMLHttpRequest()

			// 2.连接服务
			xhr.open("get", `http://wish.byesame.com/admin?page=${val}&rows=10`)
			xhr.setRequestHeader("token", localStorage.getItem('token'))
			xhr.send()
			// 4.接收数据
			xhr.onreadystatechange = function(){
 				if (xhr.readyState == 4) {
 					let res = JSON.parse(xhr.responseText)
 					console.log(res)
 					if (res.code == 200) {
 						ul.innerHTML = ""
 						for(let i = 0; i < res.data.list.length; i++){
 							ul.innerHTML += `<li>
			<span>${res.data.list[i].id}</span>
			<span>${res.data.list[i].userName}</span>
			<span onclick="del(${res.data.list[i].id})">删除</span>
		</li>`

 						}
 					}
 				}
 			}
		}
		page(1)

		// 删除
		function del(id){
			//接口
			console.log(id)
			let xhr = new XMLHttpRequest()

			// 2.连接服务
			xhr.open("delete", `http://wish.byesame.com/admin`)
			xhr.setRequestHeader("token", localStorage.getItem('token'))
			xhr.setRequestHeader("content-Type",'application/x-www-form-urlencoded')
			// delete和post一样
			xhr.send(`id=${id}`)
			xhr.onreadystatechange = function(){
 				if (xhr.readyState == 4) {
 					let res = JSON.parse(xhr.responseText)
 					console.log(res)
 					// 删除成功 重新渲染页面， 更新数据
 					if (res.code == 200) {
 						page(1)
 						alert("删除成功")
 					}
 				}
 			}
		}
	</script>
</body>
</html>